<template>
  <div class="toInformation" @click="goInformation()">
    <div class="top">
      <span class="iconfont icon-icon-safe-bluefuben"></span>
      <span class="zixun">官方资讯</span>
      <span class="all">全部&nbsp;&gt;</span>
    </div>

    <div class="one">
      <p>{{newdata.title}}</p>
      <p class="intro"><span class="kind">{{newdata.kind}}</span> <span class="time">{{newdata.time}}</span></p>
    </div>

    <div class="one">
      <p>{{newdata.title}}</p>
      <p class="intro"><span class="kind">{{newdata.kind}}</span> <span class="time">{{newdata.time}}</span></p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goInformation(){
      this.$router.push('/officialInformation');
    }
  },
  created(){
    this.$store.dispatch("gettoInformation",{url:"/data/Home/toInformation"});
  },
  computed:{
    newdata(){
      return this.$store.state.toInformation.data;
    }
  },
}
</script>

<style scoped>
  .toInformation{
    height: 1.77rem;
    background-color: white;
    margin-bottom: .1rem;
  }
  .toInformation .top{
    height: .333rem;
    margin-bottom: .1rem;
    background-color: white;
    display: flex;
    align-items: center;
  }
  .icon-icon-safe-bluefuben{
    font-size: .2rem;
  }
  .zixun{
    font-size: .18rem;
    margin-left: .05rem;
    font-weight: 700;
  }
  .all{
    margin-left: 2.1rem;
    font-size: .12rem;
    color: rgb(155,155,155);
  }
  .toInformation .one{
    height: .566rem;
    margin-bottom: .1rem;
    background-color: rgb(245,245,245);
    padding: .1rem;
    border-radius: .05rem;
  } 
  .toInformation .one .intro{
    display: flex;
    justify-content: space-between;
    font-size: .12rem;
    margin-top: .02rem;
  }
  .toInformation .one .intro .kind{
    padding: .01rem .05rem;
    background-color: rgb(189,165,117);
    border-radius: 20%;
    color: white;
  }
  .toInformation .one .intro .time{
    color: rgb(200,200,200);
  }
</style>